<ul id="${id}" name="${id}" style="width: 600px;">
    <div style="display: flex;">
        <div>
            <span>按预约状态筛选</span>
            <span style="margin: 0 10px;"><label><input type="checkbox" checked="checked" id="containCancel">包含取消</label></span>
            <span><label><input type="checkbox" checked="checked" id="breakPromise" >包含失约</label></span>
        </div>
        <div style="margin-left: 30px;">
            <span>按预约类型筛选</span>
            <span style="margin: 0 10px;"><label><input type="checkbox" checked="checked" id="includingAppointment">包含预约</label></span>
            <span><label><input type="checkbox" checked="checked" id="includedShop" >包含到店</label></span>
        </div>
    </div>
    @for(item in list){
    @if(item.status == "到店"){
    <li class="includedShop" value="${item.id}" style="position: relative;font-weight: bold;color: #666666;">
        <div style="display: flex;align-items: center;">
            <p style="font-weight: bold;font-size: 16px;margin: 0;width: 100px;" value="${item.startTime}">${item.startTimeOne} </p>
            <img src="https://pynnn.oss-cn-hangzhou.aliyuncs.com/timeAxis.png" style="width: 35px;">
            <p style="font-weight: bold;font-size: 16px;margin: 0;width: 100px;text-indent: 0.4em;" value="${item.startTime}"> ${item.startTimeTwo}</p>
            <div style="flex: 1;text-align: right"></div>
        </div>
        <div value="${item.startTime}"></div>
        <div style="margin-left: 116px;border-left: 4px solid #b5b5b5;padding: 7px 0 25px 25px;margin-bottom: 5px;">
            <div style="background: #f1f1f1;padding: 10px;">
                <div style="margin-bottom: 10px;position: relative">
                    <span style="font-size: 16px;">预约</span>
                    @if(item.status == "到店"){
                    <span style="background: #42c0d4;color: white;margin-left: 20px;padding: 2px 10px;border-radius: 2px;">${item.status}</span>
                    @}
                    @if(item.status == "预约"){
                    <span style="background: #3bc442;color: white;margin-left: 20px;padding: 2px 10px;border-radius: 2px;">${item.status}</span>
                    @}
                    <span style="margin-left: 50px;">【${item.arrivalStore}】</span>
                    <span style="float: right;padding: 0 10px;border-radius: 2px;background: white;border: 1px solid #dddddd;">
                        <a href="javascript:;" onclick="getUpdateLog('${item.id}')">日志</a></span>
                </div>
                <div style="letter-spacing: 1px;">姓名：${item.customerName}</div>
                <div style="letter-spacing: 1px;">医生：${item.doctor}</div>
                <div style="letter-spacing: 1px;">现场TC：${item.fieldTc}</div>
                <div style="letter-spacing: 1px;">项目：${item.appointmentPayService}</div>
                <div style="letter-spacing: 1px;">备注:${item.remarksReservation}</div>
            </div>
            <div>${item.archiving}&nbsp;创建于&nbsp;${item.createAppointmentTime}</div>
        </div>
    </li>
    @}
    @if(item.status == "预约"){
    <li class="includingAppointment" value="${item.id}" style="position: relative;font-weight: bold;color: #666666;">
        <div style="display: flex;align-items: center;">
            <p style="font-weight: bold;font-size: 16px;margin: 0;width: 100px;" value="${item.startTime}">${item.startTimeOne} </p>
            <img src="https://pynnn.oss-cn-hangzhou.aliyuncs.com/timeAxis.png" style="width: 35px;">
            <p style="font-weight: bold;font-size: 16px;margin: 0;width: 100px;text-indent: 0.4em;" value="${item.startTime}"> ${item.startTimeTwo}</p>
            <div style="flex: 1;text-align: right">
                @if(item.outpatientName==item.arrivalStore){
                <button onclick="cancelAppointment('${item.id}')" class="btn" type="button" style="background:#ffffff;color:#666666;border:1px solid #dddddd;padding: 3px 17px;border-radius: 0;">取消</button>
                <button onclick="modifyAppointment('${item.id}')" class="btn" type="button" style="background:#ffffff;color:#666666;border:1px solid #dddddd;padding: 3px 14px;border-radius: 0;">修改</button>
                @}
            </div>
        </div>
        <div value="${item.startTime}"></div>
        <div style="margin-left: 116px;border-left: 4px solid #b5b5b5;padding: 7px 0 25px 25px;margin-bottom: 5px;">
            <div style="background: #f1f1f1;padding: 10px;">
                <div style="margin-bottom: 10px;position: relative">
                    <span style="font-size: 16px;">预约</span>
                    @if(item.status == "到店"){
                    <span style="background: #42c0d4;color: white;margin-left: 20px;padding: 2px 10px;border-radius: 2px;">${item.status}</span>
                    @}
                    @if(item.status == "预约"){
                    <span style="background: #3bc442;color: white;margin-left: 20px;padding: 2px 10px;border-radius: 2px;">${item.status}</span>
                    @}
                    <span style="margin-left: 50px;">【${item.arrivalStore}】</span>
                    <span style="float: right;padding: 0 10px;border-radius: 2px;background: white;border: 1px solid #dddddd;"><a href="javascript:;" onclick="getUpdateLog('${item.id}')">日志</a></span>
                </div>
                <div style="letter-spacing: 1px;">姓名：${item.customerName}</div>
                <div style="letter-spacing: 1px;">医生：${item.doctor}</div>
                <div style="letter-spacing: 1px;">现场TC：${item.fieldTc}</div>
                <div style="letter-spacing: 1px;">项目：${item.appointmentPayService}</div>
                <div style="letter-spacing: 1px;">备注:${item.remarksReservation}</div>
            </div>
            <div>${item.archiving}&nbsp;创建于&nbsp;${item.createAppointmentTime}</div>
        </div>
    </li>
    @}
    @if(item.arrivalStatus == "8"){
    <li class="containCancel includingAppointment" value="${item.id}" style="position: relative;font-weight: bold;color: #666666;">
        <div style="display: flex;align-items: center;">
            <p style="font-weight: bold;font-size: 16px;margin: 0;width: 100px;" value="${item.startTime}">${item.startTimeOne} </p>
            <img src="https://pynnn.oss-cn-hangzhou.aliyuncs.com/timeAxis.png" style="width: 35px;">
            <p style="font-weight: bold;font-size: 16px;margin: 0;width: 100px;text-indent: 0.4em;" value="${item.startTime}"> ${item.startTimeTwo}</p>
            <div style="flex: 1;text-align: right"></div>
        </div>
        <div value="${item.startTime}"></div>
        <div style="margin-left: 116px;border-left: 4px solid #b5b5b5;padding: 7px 0 25px 25px;margin-bottom: 5px;">
            <div style="background: #f1f1f1;padding: 10px;">
                <div style="margin-bottom: 10px;position: relative">
                    <span style="font-size: 16px;">预约</span>
                    <span style="background: #3bc442;color: white;margin-left: 20px;padding: 2px 10px;border-radius: 2px;">预约</span>
                    <span style="margin-left: 50px;">【${item.arrivalStore}】</span>
                    <span style="color: red;position: absolute;right: 66px;top: 0;">已取消</span>
                    <span style="float: right;padding: 0 10px;border-radius: 2px;background: white;border: 1px solid #dddddd;"><a href="javascript:;" onclick="getUpdateLog('${item.id}')">日志</a></span>
                </div>
                <div style="letter-spacing: 1px;">姓名：${item.customerName}</div>
                <div style="letter-spacing: 1px;">医生：${item.doctor}</div>
                <div style="letter-spacing: 1px;">现场TC：${item.fieldTc}</div>
                <div style="letter-spacing: 1px;">项目：${item.appointmentPayService}</div>
                <div style="letter-spacing: 1px;">备注:${item.remarks}</div>
            </div>
            <div>${item.archiving}&nbsp;创建于&nbsp;${item.createAppointmentTime}</div>
        </div>
    </li>
    @}
    @if(item.arrivalStatus == "7"){
    <li class="breakPromise includingAppointment" value="${item.id}" style="position: relative;font-weight: bold;color: #666666;">
        <div style="display: flex;align-items: center;">
            <p style="font-weight: bold;font-size: 16px;margin: 0;width: 100px;" value="${item.startTime}">${item.startTimeOne} </p>
            <img src="https://pynnn.oss-cn-hangzhou.aliyuncs.com/timeAxis.png" style="width: 35px;">
            <p style="font-weight: bold;font-size: 16px;margin: 0;width: 100px;text-indent: 0.4em;" value="${item.startTime}"> ${item.startTimeTwo}</p>
            <div style="flex: 1;text-align: right"></div>
        </div>
        <div value="${item.startTime}"></div>
        <div style="margin-left: 116px;border-left: 4px solid #b5b5b5;padding: 7px 0 25px 25px;margin-bottom: 5px;">
            <div style="background: #f1f1f1;padding: 10px;">
                <div style="margin-bottom: 10px;position: relative">
                    <span style="font-size: 16px;">预约</span>
                    <span style="background: #3bc442;color: white;margin-left: 20px;padding: 2px 10px;border-radius: 2px;">预约</span>
                    <span style="margin-left: 50px;">【${item.arrivalStore}】</span>
                    <span style="color: red;position: absolute;right: 66px;top: 0;">失约</span>
                    <span style="float: right;padding: 0 10px;border-radius: 2px;background: white;border: 1px solid #dddddd;">
                        <a href="javascript:;" onclick="getUpdateLog('${item.id}')">日志</a></span>
                </div>
                <div style="letter-spacing: 1px;">姓名：${item.customerName}</div>
                <div style="letter-spacing: 1px;">医生：${item.doctor}</div>
                <div style="letter-spacing: 1px;">现场TC：${item.fieldTc}</div>
                <div style="letter-spacing: 1px;">项目：${item.appointmentPayService}</div>
                <div style="letter-spacing: 1px;">备注:${item.remarksReservation}</div>
            </div>
            <div>${item.archiving}&nbsp;创建于&nbsp;${item.createAppointmentTime}</div>
        </div>
    </li>
    @}
    @}
    <script>
        $("#includingAppointment").click(function () {
            if($("#includingAppointment").is(':checked')){
                $(".includingAppointment").show()
            }else {
                $(".includingAppointment").hide()
            }
        });
        $("#includedShop").click(function () {
            if($("#includedShop").is(':checked')){
                $(".includedShop").show()
            }else {
                $(".includedShop").hide()
            }
        });
        $("#containCancel").click(function () {
            if($("#containCancel").is(':checked')){
                $(".containCancel").show()
            }else {
                $(".containCancel").hide()
            }
        });
        $("#breakPromise").click(function () {
            if($("#breakPromise").is(':checked')){
                $(".breakPromise").show()
            }else {
                $(".breakPromise").hide()
            }
        });
        /**
         * 点击修改
         */
        modifyAppointment = function (ids) {
            var index = layer.open({
                type: 2,
                title: '修改预约客户',
                area: ['70%', '95%'], //宽高
                fix: true, //不固定
                maxmin: true,
                content: Feng.ctxPath + '/doctorLooked/doctor_addTasks/' + ids
            });
            this.layerIndex = index;
        };

        /**
         * 点击取消预约
         */
        cancelAppointment = function (customerId) {
            $.ajax({
                url: Feng.ctxPath + "/customer/getCustomerIsDealStatus/"+customerId,
                type: "post",
                success: function (data) {
                    if(data==1){
                        alert("此患者已开单不能取消预约！");
                        return;
                    } else if (data == 4) {
                        alert("此患者充了储值或积分不能取消预约！");
                        return;
                    } else {
                        var index = layer.open({
                            type: 2,
                            title: '取消预约',
                            area: ['30%', '40%'], //宽高
                            fix: true, //不固定
                            maxmin: true,
                            content: Feng.ctxPath + '/doctorLooked/cancelAppointment/' + customerId
                        });
                        this.layerIndex = index;
                    }
                },
                error: function (data) {
                    alert('没有权限，请联系系统管理员!');
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                }
            });
        };
        getUpdateLog = function (customerId) {
            var index = layer.open({
                type: 2,
                title: '改动日志',
                area: ['80%', '80%'], //宽高
                fix: true, //不固定
                maxmin: true,
                content: Feng.ctxPath + '/doctorLooked/getUpdateLog/' + customerId
            });
            this.layerIndex = index;
        };
    </script>
</ul>
@if(isNotEmpty(underline) && underline == 'true'){
<div class="hr-line-dashed"></div>
@}